<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!--
			/*
			1 计算属性 - computed
			模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板变得简洁易于维护。计算属性是基于
			它们的响应式依赖进行**缓存**的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，
			也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。
			
			计算属性定义在Vue对象中，通过关键词 computed 属性对象中定义一个个函数，并返回一个值，使用计算
			属性时和 data 中的数据使用方式一致。
			
			**任何复杂的业务逻辑，我们都应当使用计算属性** -  计算属性具有依赖性，只有依赖的值发生改变，才会重新计算
			data() {
				return {
					num:50,
					num1:60
				}
			},
			computed:{
				res(){
					return this.num+this.num1
				}
			}
		
			注意  computed 里面的 属性会自动更新    属性不能直接修改
			如果想修改 那么 需要第二种配置方法
			computed:{
				num3:{
					get(){
						return this.num1+this.num2
					},
					set(val){
						this.num1 = val - this.num2
					}
				}
			}
			
			2. 监听器 - watch
				使用watch来侦听data中数据的变化，watch中的属性一定是data 中已经存在的数据。
				第一种写法
				
				watch:{
					list:{
						handler(newVal,oldVal){
							console.log(555);
							this.newList =  newVal.filter(item=>item>50)
						},
						immediate:true,  //初始化的时候 是否要监听一次
					},
					num(newVal,oldVal){
						console.log(newVal,oldVal);
					},
					obj:{
						handler(newVal,oldVal){
							console.log('监听OBJ',newVal,oldVal);
							if(newVal.age>=18){
								alert('哇撒成年了')
							}else{
								alert('哇撒未成年了')
							}
						},
						immediate:true,  //初始化的时候 是否要监听一次
						deep:true   //是否深层次监听 对象里面 属性的变化
					},
				}
				
				
				
			3.过滤器 - filters
			// 全局过滤器 
			Vue.filter('过滤器名称',function(value[,arg1,arg2...]){ 
			  //过滤器业务逻辑 
			  return .... 
			})
			// 局部过滤器 
			el: '#app', 
			data: {}, 
			filters: { 
			  过滤器名称: function(value[,arg1,arg2...]){ 
			    return something 
			  },
			 .... 
			}
			//实际代码
			filters:{
				getSex(val){
					let st ='未选择'
					if(val==1){
						st = '男'
					}
					if(val==2){
						st = '女'
					}
					return st
				},
				fixTwo(val){
					let num = '￥'+val.toFixed(2)
					
					return num
				}
			}
			*/
		</script>
	</body>
</html>
